<script>
export default {
  name: "ButtonExamplePage"
}
</script>

<template>
<div>
  <h1>按钮的五种情境颜色</h1>
  <div>
    <el-button type="primary">主按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
  </div>
  <h1>朴素按钮</h1>
  <div>
    <el-button plain type="primary">主按钮</el-button>
    <el-button plain type="success">成功按钮</el-button>
    <el-button plain type="info">信息按钮</el-button>
    <el-button plain type="danger">危险按钮</el-button>
    <el-button plain type="warning">警告按钮</el-button>
  </div>
  <h1>按钮的四种尺寸</h1>
  <div>
    <el-button type="primary">主按钮</el-button>
    <el-button size="medium">主按钮</el-button>
    <el-button size="small">主按钮</el-button>
    <el-button size="mini">主按钮</el-button>
  </div>
  <h1>圆角按钮</h1>
  <div>
    <el-button round plain type="primary">主按钮</el-button>
    <el-button round plain type="success">成功按钮</el-button>
    <el-button round plain type="info">信息按钮</el-button>
    <el-button round plain type="danger">危险按钮</el-button>
    <el-button round plain type="warning">警告按钮</el-button>
  </div>
  <h1>带图标的按钮</h1>
  <div>
    <el-button type="primary" plain icon="el-icon-phone">按钮</el-button>
    <el-button type="primary" plain icon="el-icon-phone"/>
  </div>
</div>
</template>

<style scoped>

</style>